<template>
  <div class="Sta">
    <el-row>
      <!-- 左边折线图开始 -->
      <el-col :span="8">
        <div class="grid-content left">
          <div id="left-top"></div>
          <div id="left-bottom"></div>
        </div>
      </el-col>
      <!-- 左边折线图结束 -->

      <!-- 中间数据开始 -->
      <el-col :span="8">
        <div class="grid-content mid">
          <div class="title">
            <h5>新型冠状病毒肺炎</h5>
            <h4>疫情实时追踪</h4>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content local-confirm">
                <div class="add">
                  较昨日<span style="color:#e57631;">+{{this.chinaAdd.localConfirmH5}}</span>
                </div>
                <div class="number" style="color:#e57631;">{{this.chinaTotal.localConfirm}}</div>
                <div class="text">本土现有确诊</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content now-confirm">
                <div class="add">
                  较昨日<span style="color:#e61c1d;">+{{this.chinaAdd.nowConfirm}}</span>
                </div>
                <div class="number" style="color:#e61c1d;">{{chinaTotal.nowConfirm}}</div>
                <div class="text">现有确诊</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content confirm">
                <div class="add">
                  较昨日<span style="color:#be2121;">+{{this.chinaAdd.confirm}}</span>
                </div>
                <div class="number" style="color:#be2121;">{{chinaTotal.confirm}}</div>
                <div class="text">累计确诊</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content now-severe">
                <div class="add">
                  较昨日<span style="color:#ae3ac6;">+{{this.chinaAdd.noInfect}}</span>
                </div>
                <div class="number" style="color:#ae3ac6;">{{chinaTotal.noInfect}}</div>
                <div class="text">无症状感染者</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content import">
                <div class="add">
                  较昨日<span style="color:#4e8be6;">+{{this.chinaAdd.importedCase}}</span>
                </div>
                <div class="number" style="color:#4e8be6;">{{chinaTotal.importedCase}}</div>
                <div class="text">境外输入</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content dead">
                <div class="add">
                  较昨日<span style="color:#4e5a65;">+{{this.chinaAdd.dead}}</span>
                </div>
                <div class="number" style="color:#4e5a65;">{{chinaTotal.dead}}</div>
                <div class="text">累计死亡</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 中间数据结束 -->

      <!-- 右边折线图开始 -->
      <el-col :span="8">
        <div class="grid-content right">
          <div id="right-top"></div>
          <div id="right-bottom">
            <h3 style="padding-left:12px;">现有风险地区</h3>
            <div class="right-body">
              <div class="high-risk">高风险地区
                <span class="num">&nbsp;{{this.dangerCount[0]}}&nbsp;&nbsp;</span>个
                <router-link to="/home/RiskArea">
                  <el-link :underline="false" type="primary" class="detail">
                    详细<i class="el-icon-d-arrow-right el-icon--right"></i>
                  </el-link>
                </router-link>
              </div>
              <div class="mid-risk">中风险地区
                <span class="num">&nbsp;{{this.dangerCount[1]}}&nbsp;&nbsp;</span>个
                <router-link to="/home/RiskArea">
                  <el-link :underline="false" type="primary" class="detail">
                    详细<i class="el-icon-d-arrow-right el-icon--right"></i>
                  </el-link>
                </router-link>

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右边折线图结束 -->
    </el-row>

  </div>
</template>

<script>
// 引入样式

// 引入api
import { getStatisticsChinaAPI, getCompareChinaAPI, getRiskAreaAPI } from '@/api/index.js'
export default {
  name: 'StaGraph',
  data() {
    return {
      // axios请求回来的疫情数据（中间表格）
      midMsg: {},
      // axios请求回来的疫情数据（三个图）
      chartMsg: {},
      // axios请求回来的风险地区数据（右下）
      dangerCount: [],

      // 用于渲染的疫情累计数据（中间表格）
      chinaTotal: {},
      // 用于渲染的疫情新增数据（中间表格）
      chinaAdd: {},

      // 折线图和柱状图的y轴
      axisLabel: {
        formatter: '{value}'
      },

      // 中国累计趋势折线图的数据（左上）
      compareAllData: {
        title: '累计确诊趋势',
        titileData: ['累计确诊', '累计治愈', '累计死亡'],
        xData: [],
        series: [
          {
            name: '累计确诊',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#f39494',
            data: []
          },
          {
            name: '累计治愈',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#b2db9e',
            data: []
          },
          {
            name: '累计死亡',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#879bd7',
            data: []
          }
        ]
      },
      // 中国新增趋势折线图（左下）
      compareAddData: {
        title: '累计新增趋势',
        titileData: ['新增确诊', '新增疑似', '新增治愈', '新增死亡'],
        xData: [],
        series: [
          {
            name: '新增确诊',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#f39494',
            data: []
          },
          {
            name: '新增无症状',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#fbd88a',
            data: []
          },
          {
            name: '新增治愈',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#b2db9e',
            data: []
          },
          {
            name: '新增死亡',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#879bd7',
            data: []
          }
        ]
      },
      // 中国非湖南累计确诊前五（右上）
      topFiveData: {
        title: '中国非湖北地区累计确诊前五',
        xData: [],
        yData: []
      }
    }
  },
  created() {
    // 通过axios请求数据
    this.getMidMsg()
    this.getChartMsg()
    this.getRiskArea()
  },
  watch: {
    // 监听到midMsg数组变化时，自动执行一次函数将数据存入新数组
    midMsg: {
      handler() {
        // 渲染中间表格
        this.chinaTotalMsg()
        this.chinaAddMsg()
        this.chinaTopFiveCitys()
      }
    },
    chartMsg: {
      handler() {
        // 给四个图表的data赋值
        this.chinaCompareAllMsg()
        this.chinaAddCompareMsg()
      }
    },
    compareAllData: {
      handler() {
        // 渲染左上角图表
        this.$myChart.getLine('left-top', this.compareAllData, this.axisLabel)
      },
      deep: true
    },
    compareAddData: {
      handler() {
        // 渲染左下角图表
        this.$myChart.getLine('left-bottom', this.compareAddData, this.axisLabel)
      },
      deep: true
    },
    topFiveData: {
      handler() {
        // 渲染右上角图表
        this.$myChart.getBar('right-top', this.topFiveData, this.axisLabel)
      },
      deep: true
    }
  },
  methods: {
    // 用axios请求疫情数据（渲染中间表格）
    async getMidMsg() {
      const { data: res } = await getStatisticsChinaAPI()
      this.midMsg = res.data.diseaseh5Shelf
    },
    // 用axios请求疫情数据（渲染四个图）
    async getChartMsg() {
      const { data: res } = await getCompareChinaAPI()
      this.chartMsg = res.data
    },
    // 用axios取得中国风险地区信息
    async getRiskArea() {
      const { data: res } = await getRiskAreaAPI()
      this.dangerCount.push(res.data[0].dangerCount)
      this.dangerCount.push(res.data[1].dangerCount)
    },

    // 取得中国疫情的六项总数据
    chinaTotalMsg() {
      const chinaTotalText = this.midMsg.chinaTotal
      const obj = {}
      obj.localConfirm = chinaTotalText.localConfirm
      obj.nowConfirm = chinaTotalText.nowConfirm
      obj.confirm = chinaTotalText.confirm
      obj.noInfect = chinaTotalText.noInfect
      obj.importedCase = chinaTotalText.importedCase
      obj.dead = chinaTotalText.dead
      this.chinaTotal = obj
    },

    // 取得中国疫情的六项新增数据
    chinaAddMsg() {
      const chinaAddText = this.midMsg.chinaAdd
      const obj = {}
      obj.localConfirmH5 = chinaAddText.localConfirmH5
      obj.nowConfirm = chinaAddText.nowConfirm
      obj.confirm = chinaAddText.confirm
      obj.noInfect = chinaAddText.noInfect
      obj.importedCase = chinaAddText.importedCase
      obj.dead = chinaAddText.dead
      this.chinaAdd = obj
    },

    // 取得中国近期疫情的累计趋势数据
    chinaCompareAllMsg() {
      const arr = this.chartMsg.chinaDayList
      for (let i = 0; i < arr.length; i++) {
        // 导入时间（x轴）
        this.compareAllData.xData.push(arr[i].date)
        // 导入三个数据（y轴）
        this.compareAllData.series[0].data.push(arr[i].confirm)
        this.compareAllData.series[1].data.push(arr[i].heal)
        this.compareAllData.series[2].data.push(arr[i].dead)
      }
    },

    // 取得中国近期疫情的新增趋势数据
    chinaAddCompareMsg() {
      const arr = this.chartMsg.chinaDayAddList
      for (let i = 0; i < arr.length; i++) {
        // 导入时间轴（x轴）
        this.compareAddData.xData.push(arr[i].date)
        // 导入三个数据（y轴）
        this.compareAddData.series[0].data.push(arr[i].confirm)
        this.compareAddData.series[1].data.push(arr[i].infect)
        this.compareAddData.series[2].data.push(arr[i].heal)
        this.compareAddData.series[3].data.push(arr[i].dead)
      }
    },
    // 取得中国非湖北地区累计确诊前五省市
    chinaTopFiveCitys() {
      const arr = this.midMsg.areaTree[0].children
      const temp = []
      for (let i = 0; i < arr.length; i++) {
        const city = { name: '', confirm: '' }
        city.name = arr[i].name
        city.confirm = arr[i].total.confirm
        if (city.name !== '湖北') {
          temp.push(city)
        }
      }
      function compare(p) {
        // 这是比较函数
        return function(m, n) {
          const a = m[p]
          const b = n[p]
          return b - a // 升序
        }
      }
      temp.sort(compare('confirm'))
      console.log(temp)
      for (let i = 0; i < 5; i++) {
        this.topFiveData.xData.push(temp[i].name)
        this.topFiveData.yData.push(temp[i].confirm)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/graph.css';
</style>
